<template>
    <div class="table-container" :class="{ 'multi-table': true }">
      <div class="t-header">
        <div
          class="t-th"
          :class="{ 'gap-cell': item === true }"
          v-for="(item, index) in tableHeaders"
          :key="index"
        >
          {{ item === true ? "" : item }}
        </div>
      </div>
      <div class="t-body">
        <div
          class="t-row"
          :style="{
            gridTemplateColumns: `repeat(${repeatColumn}, 1fr)`,
          }"
          v-for="(row, rowIndex) in tableDataNew"
          :key="rowIndex"
        >
          <template v-for="(cell, cellIndex) in row" :key="cellIndex">
            <div
              class="t-td"
              :class="{ 'gap-cell': cell === true }"
              v-if="!isArray(cell)"
            >
              {{ cell === true ? "" : cell }}
            </div>
            <div class="t-td" :class="{ 'gap-cell': cell === true }" v-else>
              <div
                class="t-td"
                :class="{ 'gap-cell': item === true }"
                v-for="(item, itemIndex) in cell"
                :key="itemIndex"
              >
                {{ item === true ? "" : item }}
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed, reactive } from "vue";
  
  const props = defineProps({
    // 表格列配置
    headers: {
      type: Array,
      default: () => [],
    },
    // 表格数据
    data: {
      type: Array,
      default: () => [],
    },
    splitNum: { type: Number, default: 2 }, // 分栏列索引
  });
  
  const isArray = (data) => {
    return Array.isArray(data);
  };
  
  const repeatColumn = computed(() => {
    return props.headers.length * props.splitNum + (props.splitNum - 1);
  });
  
  const tableHeaders = computed(() => {
    // return Array(props.splitNum).fill(props.headers).flat()
    return Array.from({ length: props.splitNum }, (_, i) =>
      i ? [true, ...props.headers] : props.headers
    ).flat();
  });
  
  // 精简的列分割方法 - 只适配二维数组
  const splitTableData = (data, columns = 1) => {
    if (columns <= 1) return data;
  
    const result = [];
    const rowsPerChunk = Math.ceil(data.length / columns);
  
    // 计算每行应该有多少列（包括分割列）
    const colsPerRow = data[0] ? data[0].length * columns + (columns - 1) : 0;
  
    for (let chunkIndex = 0; chunkIndex < rowsPerChunk; chunkIndex++) {
      const row = [];
  
      for (let colIndex = 0; colIndex < columns; colIndex++) {
        const dataIndex = chunkIndex * columns + colIndex;
  
        // 添加分割列（除了第一列）
        if (colIndex > 0) {
          row.push(true); // gap 列
        }
  
        // 添加数据列
        if (dataIndex < data.length) {
          // 直接使用原始数组数据
          row.push(...data[dataIndex]);
        } else {
          // 最后一行的长度不够，补充空数据
          const emptyCols = data[0] ? Array(data[0].length).fill("") : [];
          row.push(...emptyCols);
        }
      }
  
      // 确保每行长度一致
      while (row.length < colsPerRow) {
        row.push("");
      }
  
      result.push(row);
    }
  
    return result;
  };
  
  // 使用示例
  const tableDataNew = splitTableData(props.data, props.splitNum);
  
  </script>
  
  <style lang="scss" scoped>
  .table-container {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    // border: 1px solid #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
    border-left: 2px solid #e8e8e8;
    border-right: 2px solid #e8e8e8;
    box-sizing: border-box;
  
    .t-header {
      width: 100%;
      display: flex;
      font-weight: bold;
    }
  
    .t-body {
      width: 100%;
  
      .t-row {
        width: 100%;
        display: grid;
        // grid-template-columns: 1fr 1fr 1fr;
        box-sizing: border-box;
  
        &:nth-child(2n) .t-td:not(:has(.t-td)) {
          background: #e8f2fd;
        }
      }
    }
  
    .t-th,
    .t-td {
      width: 100%;
      flex: 1;
      flex-shrink: 0;
      text-align: center;
      min-height: 80px;
      padding: 10rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .t-td {
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
    }
  
    .t-th {
      background: #afd9fc;
  
      &:has(+ .gap-cell) {
        border-top-right-radius: 6px;
      }
  
      &:not(.gap-cell) {
        border-top: 2px solid #e8e8e8;
        box-sizing: border-box;
      }
  
      &.gap-cell + .t-th {
        border-top-left-radius: 6px;
      }
    }
    .t-header .gap-cell {
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
    }
  
    .t-body .t-row:last-child > .t-td {
      border-bottom: 2px solid #e8e8e8;
      border-bottom-right-radius: 6px;
      box-sizing: border-box;
  
      // 选中 .gap-cell 前一个单元格里面的最后一个元素
      &:has(+ .gap-cell) > :last-child,
      &:has(+ .gap-cell):not(:has(.t-td)) {
        border-bottom-right-radius: 6px;
      }
  
      // 选中 .gap-cell 后一个单元格里面的最后一个元素
      &.gap-cell + .t-td > :last-child,
      &.gap-cell + .t-td:not(:has(.t-td)) {
        border-bottom-left-radius: 6px;
      }
    }
  
    .t-td:has(+ .gap-cell),
    .t-th:has(+ .gap-cell) {
      border-right: 2px solid #e8e8e8;
      
      // 如果是最后一行的前一个单元格
      .t-body .t-row:last-child & {
        border-bottom-right-radius: 6px;
      }
    }
  
    // 所有 .gap-cell 的后一个单元格
    .gap-cell + .t-td,
    .gap-cell + .t-th {
      border-left: 2px solid #e8e8e8;
  
      // 如果是最后一行的后一个单元格
      .t-body .t-row:last-child & {
        border-bottom-left-radius: 6px;
      }
    }
  
    .gap-cell {
      background-color: transparent !important;
      border-bottom: none !important;
    }
  
  }
  </style>
  